<!-- 还款管理 -->
<template>
  <div>
    <Upload ref="uploadForm" @ok="search"></Upload>
    <Review ref="reviewForm" @ok="search"></Review>
    <Update ref="update" @ok="search"></Update>
    <ZgNewPage
      ref="page"
      :title="pageTitle"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :extraBtns="extraBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="350"
      :scrollX="1500"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
      @extra="toExtra"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h,i) in headers"
          :key="`column${i}`"
          :width="h.width===0 ? 'auto' : h.width"
          align="center"
          :title="h.label">
          <template slot-scope="record">
            <template v-if="h.code === 'A'">
              <span style="color:#1890ff">{{ A[record[h.code]] || record[h.code] }}</span>
            </template>
            <template v-else>{{ record[h.code] }}</template>
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import Upload from './Upload'
import Review from './Review'
import Update from './Update'
const list = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' }
]
export default {
  components: {
     Upload, Review, Update
  },
  data () {
    return {
      pageTitle: '产品配置',
      uniqueName: 'test',
      A: {
        '1': '未还款',
        '2': '待审核',
        '3': '审核中',
        '4': '已通过',
        '5': '已驳回'
      },
      pageOpt: {
        showConditionBtn: true,
        showHeaderConfig: true,
        showAttachBtn: true,
        showPageTitle: false
      },
      conditions: [
        { code: 'select', compType: '下拉选择', label: '融资编号', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'select', compType: '下拉选择', label: '融资产品', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'select', compType: '下拉选择', label: '放款银行', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'select', compType: '下拉选择', label: '业务类型', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'name1', compType: '单行文本', label: '融资金额', defaultVal: '' },
        { code: 'select', compType: '下拉选择', label: '放款时间', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'select', compType: '下拉选择', label: '创建时间', defaultVal: '', extra: { 下拉选项: list } },
        { code: 'select', compType: '下拉选择', label: '创建人', defaultVal: '', extra: { 下拉选项: list } }
      ],
      headers: [
        { code: 'A', label: '流转状态', isShow: true, sort: 0 },
        { code: 'B', label: '授信编号', isShow: true, sort: 0 },
        { code: 'C', label: '融资编号', isShow: true, sort: 0 },
        { code: 'D', label: '融资产品', isShow: true, sort: 0 },
        { code: 'E', label: '放款银行', isShow: true, sort: 0 },
        { code: 'F', label: '业务类型', isShow: true, sort: 0 },
        { code: 'G', label: '融资金额', isShow: true, sort: 0 },
        { code: 'H', label: '还款金额', isShow: true, sort: 0 },
        { code: 'I', label: '放款时间', isShow: true, sort: 0 },
        { code: 'J', label: '创建人', isShow: true, sort: 0 }
      ],
      dataBtns: [
        { key: 1, name: '详情', type: 'link', isShow: () => { return true } },
        { key: 2, name: '上传还款单', type: 'link', isShow: (row) => row.A === '1' || row.A === '4' },
        { key: 3, name: '还款单审核', type: 'link', isShow: () => { return true } }
      ],
      extraBtns: [
        { key: 1, name: '导出', icon: 'download', type: 'primary' }
      ]
    }
  },
  methods: {
    search () {
      this.$refs.page.search()
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [
        { key: '1', id: '1', A: '1', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '2025-6-11', J: '李华 ', isUse: true },
        { key: '2', id: '2', A: '2', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '/', J: '李华 ', isUse: true },
        { key: '3', id: '3', A: '3', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '/', J: '李华 ', isUse: true },
        { key: '4', id: '4', A: '4', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '/', J: '李华 ', isUse: true },
        { key: '5', id: '5', A: '5', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '/', J: '李华 ', isUse: true },
        { key: '6', id: '6', A: '1', B: '20256120', C: '20256120', D: '浦发银承1', E: '浦发银行', F: '铁路业务', G: '10.000.000', H: '/', I: '/', J: '李华 ', isUse: true }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    onFilter (f, param) {
    },
    toAdmin (param) {
      if (param.key === 1) {
        this.$refs.update.open({}, 'details')
      } else if (param.key === 2) {
        this.$refs.uploadForm.open()
      } else if (param.key === 3) {
        this.$refs.reviewForm.open()
      }
    },
    toExtra (opt) {
      this.$refs.add.open()
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
